<template>
  <div style="padding: 10px">
    <d-group-form ref="dFormRef" v-model="formData" :formGroupConfig="formGroupConfig">
      <template #default="{ active, group }">
        <div :class="['title-wrapper', { 'is-active': active }]">{{ group }}</div>
      </template>
      <template #default2="{ active, group }">
        <div :class="['title-wrapper2', { 'is-active': active }]">{{ group }}</div>
      </template>
      <template #title1>
        <d-input v-model="formData.default1.title1"></d-input>
      </template>
    </d-group-form>
    {{ formData }}
    <div style="margin-top: 20px">
      <d-button type="primary" @click="submit">提交</d-button>
      <d-button type="warning" @click="reset">重置</d-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const formGroupConfig = ref([
    {
      group: '我是自定义一，不带图标，可以标题中自定义图标',
      class: 'group',
      slot: 'default',
      showIcon: false,
      formConfig: {
        class: 'flex',
        labelWidth: '100px',
        rules: {
          'default1.input': [{ required: true, message: '请输入内容', trigger: 'blur' }]
        }
      },
      formItemConfig: [
        { label: '插槽', slot: 'title1', prop: 'default1.title1', class: 'w-full' },
        { cType: 'input', label: '普通输入', prop: 'default1.input', class: 'w-33' },
        {
          cType: 'input',
          label: '最小值10',
          prop: 'min',
          config: { min: 10 },
          class: 'w-33'
        },
        { cType: 'date', label: '日期选择', prop: 'default1.date1', class: 'w-33' }
      ]
    },
    {
      group: '我是自定义二，带图标',
      expand: false,
      slot: 'default2',
      formConfig: {
        class: 'flex',
        labelWidth: '100px'
      },
      formItemConfig: [
        { cType: 'input', label: '普通输入', prop: 'input', class: 'w-33' },
        { cType: 'date', label: '日期选择', prop: 'date1', class: 'w-33' }
      ]
    }
  ])
  const formData = ref({
    default1: {
      title1: 'default1插槽默认值',
      input: '',
      date1: ''
    },
    min: 23,
    input: 12,
    date1: ''
  })

  const dFormRef = ref()
  const submit = async () => {
    const res = await dFormRef.value.validate()
  }
  const reset = () => {
    dFormRef.value.resetFields()
    console.log(' dFormRef.value: ', dFormRef.value.resetFields)
  }
</script>
<style scoped lang="scss"></style>
<style>
  .flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .w-full {
    width: 100%;
  }
  .w-33 {
    width: 33%;
  }
  .group {
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
  }
  .title-wrapper {
    display: flex;
    flex: 1;
    background-color: aquamarine;
  }
  .title-wrapper2 {
    display: flex;
    flex: 1;
    background-color: rosybrown;
  }

  .title-wrapper.is-active {
    color: var(--el-color-primary);
  }
</style>
